<template>
	<view class="destination">
		<!-- 目的地 -->
		<view class="destinationT">
			<u-navbar :safeAreaInsetTop="true" :bgColor="bgColor">
				<view class="u-nav-slot" slot="left"></view>
				<view class="u-nav-slot" slot="center">
					<span :style="bgColor=='#023c48'?'color:#ffffff':''">目的地</span>
				</view>
			</u-navbar>
			<view class="destinationTsearch" :class="bgColor=='#023c48'?'destinationTsearchBac':''">
				<u-search v-model="par.searchName" @custom="customData"></u-search>
			</view>
		</view>
		<!-- 中间轮播 -->
		<view class="destinationC">
			<view class="destinationCI">
				<img :src="listSwiperStr" alt="" />
			</view>
			<swiper class="destinationSwiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration" @change="changeSwiper" duration="1000"
				easingFunction="easeOutCubic">
				<swiper-item v-for="(item,index) in destinationData" :key="index" class="swiperItem">
					<view class="swiperItemI" :class="listSwiperStr==item.photo?'photoC':'photoB'">
						<img :src="item.photo" alt="" />
						<view class="swiperItemIT">
							<h2>{{item.name}}</h2>
							<view class="swiperItemITL">
								<view class="swiperItemITLT">
									{{item.level}}A
								</view>
								<view class="swiperItemITLI" v-for="(it,ind) in item.label.split(',')">
									{{it}}
								</view>
							</view>
							<view class="swiperItemIJ">
								<img src="/static/qz.png" alt="" />
								<span>距离>{{par.lon==0&&par.lat==0?'100':item.distanceKm}}Km</span>
							</view>
							<view class="swiperItemIJ">
								<img src="/static/dw.png" alt="" />
								<span>{{item.address}}</span>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 底部列表 -->
		<view class="destinationD">
			<scroll-view scroll-y="true" style="height: 80vh;" refresher-background="#FFF" @scrolltolower="loadMore">
				<view class="destinationDItem" v-for="(item,index) in destinationData" :key="index">
					<view class="destinationDItemImg">
						<img :src="item.photo" alt="" />
					</view>
					<view class="destinationDItemT">
						<h2>{{item.name}}</h2>
						<view class="destinationDItemTC">
							<view class="destinationDItemTCL">
								{{item.level}}A
							</view>
							<view class="destinationDItemTCI" v-for="(it,ind) in item.label.split(',')">
								{{it}}
							</view>
						</view>
						<view class="swiperItemIJ">
							<img src="/static/qz1.png" alt="" />
							<span>距离>{{par.lon==0&&par.lat==0?'100':item.distanceKm}}Km</span>
						</view>
						<view class="swiperItemIJ">
							<img src="/static/dw1.png" alt="" />
							<span>{{item.address}}</span>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 底部的菜单 -->
		<customTabBar></customTabBar>
	</view>
</template>

<script>
	import {
		destinationCenterList
	} from '@/api/scenicSpotDetails.js'
	export default {
		data() {
			return {
				bgColor: '#ffffff00',
				par: {
					pageNum: 1,
					pageSize: 10,
					searchName: '',
					lon: 0,
					lat: 0
				},
				// 页面的数据
				destinationData: [],
				// 背景轮播
				listSwiperStr: ''
			};
		},
		onShow() {
			this.getData()
		},
		methods: {
			// 下拉加载
			loadMore() {
				this.par.pageSize = this.par.pageSize + 5
				this.getData()
			},
			// 轮播图切换
			changeSwiper(e) {
				this.listSwiperStr = this.destinationData[e.detail.current].photo
			},
			// 搜索
			customData() {
				this.getData()
			},
			async getData() {
				let that = this
				uni.getLocation({
					type: 'wgs84',
					success: async function(r) {
						that.par.lon = r.longitude
						that.par.lat = r.latitude
						let res = await destinationCenterList(that.par)
						if (res.code == 200) {
							that.destinationData = res.data.records
							that.listSwiperStr = that.destinationData[0].photo
							console.log(that.destinationData, 99);
						}
					},
					fail: async function(r) {
						let res = await destinationCenterList(that.par)
						if (res.code == 200) {
							that.destinationData = res.data.records
							that.listSwiperStr = that.destinationData[0].photo
						}
					}
				});
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 50) {
				this.bgColor = '#023c48';
			} else {
				this.bgColor = '#ffffff00';
			}
		}
	}
</script>

<style lang="scss">
	.destination {
		position: relative;
		width: 100%;
		padding-bottom: 150rpx;

		.destinationD {
			margin-top: 30rpx;
			width: 100%;
			padding: 0 20rpx;


			.destinationDItem {
				width: 100%;
				min-height: 160rpx;
				margin-bottom: 20rpx;
				padding: 15rpx;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				border-radius: 5rpx;
				display: flex;
				gap: 10rpx;

				.destinationDItemT {
					width: 80%;

					.swiperItemIJ {
						margin-top: 10rpx;
						display: flex;
						align-items: center;
						gap: 10rpx;
						font-size: 24rpx;
						color: #515151;

						img {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.destinationDItemTC {
						display: flex;
						align-items: center;
						margin: 10rpx 0;
						gap: 10rpx;
						font-size: 26rpx;
						flex-wrap: wrap;

						.destinationDItemTCI {
							padding: 5rpx 10rpx;
							background: linear-gradient(to right, #e1f1f3, #edf3ea);
							color: #55d091;
						}

						.destinationDItemTCL {
							padding: 5rpx 10rpx;
							border: 1px solid;
							border-image: linear-gradient(to right, #059ab7, #70e400) 1;
							background: linear-gradient(to right, #70e400, #059ab7);
							-webkit-background-clip: text;
							background-clip: text;
							-webkit-text-fill-color: transparent;
							text-fill-color: transparent;
						}
					}

					h2 {
						font-size: 36rpx;
					}
				}

				.destinationDItemImg {
					min-height: 160rpx;

					img {
						width: 160rpx;
						height: 100%;
						object-fit: cover;
						/* 等比例缩放，可能裁剪部分内容 */
						object-position: center;
						border-radius: 5rpx;
					}
				}

			}
		}

		.destinationC {
			width: 100%;

			.destinationSwiper {
				width: 100%;
				height: 800rpx;
				margin-top: -370rpx;

				.swiperItem {
					max-width: 550rpx !important;
					padding: 0 0 0 90rpx;

					.photoB {
						transform: scale(0.9);
						transform-origin: center;
					}

					.photoC {
						transform: scale(1);
						transform-origin: center;
					}

					.swiperItemI {
						width: 100%;
						position: relative;
						transition: transform 0.3s ease;

						.swiperItemIT {
							position: absolute;
							width: 100%;
							bottom: 45rpx;
							background: rgba(255, 255, 255, 0.1);
							box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
							backdrop-filter: blur(5px);
							-webkit-backdrop-filter: blur(5px);
							color: #ffffff;
							padding: 20rpx 30rpx;

							.swiperItemIJ {
								margin-top: 10rpx;
								display: flex;
								align-items: center;
								gap: 10rpx;
								font-size: 24rpx;


								img {
									width: 30rpx;
									height: 30rpx;
								}
							}

							.swiperItemITL {
								width: 100%;
								display: flex;
								align-items: center;
								font-size: 24rpx;
								margin-top: 10rpx;
								gap: 10rpx;
								flex-wrap: wrap;

								.swiperItemITLI {
									padding: 5rpx 15rpx;
									border: 1px solid #ffffff;
									border-radius: 5rpx;
									white-space: nowrap;
								}

								.swiperItemITLT {
									padding: 5rpx 15rpx;
									background-color: #ffd422;
									border-radius: 20rpx;
									color: black;
								}
							}

							h2 {
								font-size: 40rpx;
							}
						}

						img {
							border-radius: 40rpx;
							width: 100%;
							height: 800rpx;
						}
					}

				}
			}

			.destinationCI {
				display: flex;
				align-items: center;
				width: 100%;

				img {
					opacity: 0.5;
					width: 100%;
					height: 600rpx;
				}
			}
		}

		.destinationT {
			width: 100%;
			position: relative;

			.destinationTsearchBac {
				background-color: #023c48;

				.u-search__action {
					color: #ffffff;
				}
			}

			.destinationTsearch {
				width: 100%;
				position: fixed;
				padding: 0 20rpx;
				top: 127rpx;
				z-index: 99;
				padding-bottom: 10rpx;
			}


		}
	}
</style>